<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>截图测试</title>
    <script src="jsmpeg.min.js"></script>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <div id="root"></div>
    <script type="text/babel">

      function MyApp() {

        const [picture, setPicture] = React.useState('')

        const handleClick = () =>{
          axios({
            method: 'get',
            url: 'http://139.9.41.8:22856/rest/capture',
            params: {
              ch: 66
            },
            responseType: 'blob'
          }).then(res =>{
            const reader = new FileReader()
              reader.readAsDataURL(res.data)
              reader.onload = () => {
                  setPicture(reader.result)
              }
          }).catch(err =>{
            console.error(err)
          })
        }

        return (
                <>
                    <button onClick={handleClick}>点我截图</button><br/>
                    <img src={picture} height="400" width="700" alt="截图"/>
                </>
        )
      }

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(<MyApp />);

    </script>
</body>
</html>